<style>
  body{
    margin: 0;
    width: 1920px;
    height: 947px;
  }
  .desktop-page{
    width: 1920px;
    height: 947px;
  }
  .desktop-taskbar {
    width: 1920px;
    height: 30px;
    border-width: 0 0 1px;
  }
  .desktop-panel{
    width: 1920px;
    height: 917px;
    top: 30px;
    background-image: url("/static/images/wallpaper.jpg");
    background-size: cover;
    overflow-y: hidden;
  }
  .app-icon{
    /*width: 90px;*/
    /*height: 100px;*/
    position: absolute;
  }
  .area-choose{
    position: absolute;
    background-color: rgba(0,134,255, 0.27);
  }
</style>

<template>
  <div class="desktop-page">
    <div id="taskbar" class="desktop-taskbar">
      <button>hello</button>
    </div>
    <!-- <div id="panel" class="desktop-panel" @mousedown="mouse_down" @mousemove="mouse_move" @mouseup="mouse_up">
    <div id="panel" class="desktop-panel" @mouseup="mouse_up">
     -->
    <div id="panel" class="desktop-panel" @mousedown="mouse_down" @mousemove="mouse_move" @mouseup="mouse_up"
         @dragover="drag_over($event)" @drop="icon_drop($event)">
      <div  class="app-icon" :style="app.style" v-for="(app, index) in applications" @click="set_app_choose(index)"
            draggable="true" @dragstart="drag_icon($event, index)">
        <app  v-bind="app.show"></app>
      </div>
      <div class="area-choose" :style="selection_area_style" v-if="area_selection_mark"></div>
    </div>
  </div>
</template>

<script>
  import application from '@/components/application'
  import {DesktopGrid} from '@/assets/script/desktop'
  import {Application} from '@/assets/script/application'
  import {AreaSelection} from '@/assets/script/areaselection'

  export default {
    name: 'home',
    data () {
      return {
        size: {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        },
        grid: new DesktopGrid(),
        selection: new AreaSelection(),
        applications: [],
        chosen: [],
      }
    },
    computed: {
      base_url () {
        // return 'http://localhost:8000'
        return 'http://172.20.224.81:8000'
      },
      area_selection_mark(){
          return this.selection.mark;
      },
      selection_area_style(){
          return this.selection.style;
      },

    },

    components: {
      'app': application,
    },

    created: function () {
      let oa = new Application(0, '个人中心', '/static/images/icon_personal.png', 0, 0, 'hello');
      let pro = new Application(0, '流程中心', '/static/images/icon_pro_center.png', 0, 1, 'hello');

      this.applications.push(oa);
      this.applications.push(pro);
      for(let app of this.applications){
        this.grid.place(app);
      }
//      window.addEventListener('resize', this.windowResize)
    },

//    beforeDestroy: function () {
//      window.removeEventListener('resize', this.windowResize)
//    },

    methods: {
      windowResize: function (event) {
        this.size.width = document.documentElement.clientWidth;
        this.size.height = document.documentElement.clientHeight;
        console.log('window resize')
      },

      mouse_down: function (event) {
        if(event.button === 0){
          this.selection.selection_start(event);
        }
      },

      mouse_move: function (event) {
        if(this.selection.begin){
          this.clean_icon_choose();
          let area = this.selection.selection(event);
          let chosen = this.grid.area_select(this.applications, area);
          if(chosen.length > 0){
            for(let app of chosen){
              this.chosen.push(app);
            }
          }
        }
      },

      mouse_up: function (event) {
        if(event.button === 0){
          if(this.selection.mark){
            this.selection.selection_finish(event);
          }else{
            this.clean_icon_choose();
          }
          this.selection.clean();
        }else {
          this.clean_icon_choose();
        }
      },

      set_app_choose(index){
        this.clean_icon_choose();
        let app = this.applications[index];
        app.choosed();
        this.chosen.push(app);
      },

      clean_icon_choose: function () {
        if(this.chosen.length === 0){
          return;
        }
        for(let app of this.chosen){
          app.dechoose();
        }
        this.chosen.splice(0, this.chosen.length);
      },

      drag_over: function(event){
        event.preventDefault();
        console.log('icon drag over.')
      },
      icon_drop: function (event) {
        event.preventDefault();
      },
      drag_icon: function(event, index){
        console.log('icon drag start. index = ' + index);
      }
    }
  }
</script>
